<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .control{
            width: 800px;
            margin: 20px auto;
        }
        td{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="control">
        姓名：<input type="text" >
        手机：<input type="text" >
        年龄：<input type="text" >
        <button> 增 加 </button>
    </div>
    <table border="1" width="600" align="center">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>手机</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="text-align: center">
            <tr>
                <td>1</td>
                <td>马云</td>
                <td>13245678945</td>
                <td>52</td>
                <td><a href="#">删 除</a> | <a href="#">替 换 </a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>马化腾</td>
                <td>13647894245</td>
                <td>66</td>
                <td><a href="#">删 除</a> | <a href="#">替 换 </a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>许家印</td>
                <td>13589454456</td>
                <td>36</td>
                <td><a href="#">删 除</a> | <a href="#">替 换 </a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>王卫</td>
                <td>13248965231</td>
                <td>59</td>
                <td><a href="#">删 除</a> | <a href="#">替 换 </a></td>
            </tr>
        </tbody>
    </table>
    <script>
        //tBodies（表体）    rows（行数） cells（单元格数） tHead(表头) tFoot(表尾) rowIndex(第几行)
//        var oTab = document.querySelector("table").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[1].innerText;
//        var oTab = document.querySelector("table").tBodies[0].rows[1].cells[1].innerText;
//        alert(oTab);
//        alert(oTab.tBodies[0].rows.length);     //返回表格的行数

        var oTab = document.querySelector("table");
        var aRows = oTab.tBodies[0].rows, sColor = "";
        oTab.tHead.style.backgroundColor = "orange";

        for(var i = 0, len = aRows.length; i < len; i++){
            if(i % 2){
                aRows[i].style.backgroundColor = "pink";
            }else{
                aRows[i].style.backgroundColor = "skyblue";
            }
            aRows[i].onmouseover = function(){
                sColor = this.style.backgroundColor;
                this.style.backgroundColor = "yellow";
            };
            aRows[i].onmouseout = function(){
                this.style.backgroundColor = sColor;
            };
        }

    </script>
</body>
</html>